<template>
  <div class="user-edit">
    <Drawer :title="title" v-model="visible" width="1024" :mask-closable="false">
      <Scroll :height="height">
        <div style="width: 98%">
          <div style="background-color: rgba(139,139,139,0.6); font-size: 18px;font-family: '宋体';">
            <div style="width: 95%;background-color: #ffffff;margin: 0 auto;">
              <div class="paperStyle" id="page_content">
                <div style="margin: 42px 36px;line-height: 34px;font-family: '微软雅黑';font-size:12px;color: #000;">
                  <div style="text-align: center;font-family: '微软雅黑'"><h2>工业品买卖合同</h2></div>
                  <Row :gutter="128">
                    <Col span="11" offset="1">
                      供方：{{contractForm.partB.company}}
                    </Col>
                    <Col span="11">
                      签订时间：{{contractForm.contract_date_cn}}
                    </Col>
                  </Row>
                  <Row :gutter="128">
                    <Col span="11" offset="1">
                      需方：{{contractForm.partA.company}}
                    </Col>
                    <Col span="11">
                      合同名称：{{contractForm.contract_name}}
                    </Col>
                  </Row>
                  <Row>
                    <div><b>标的，数量及价款</b></div>
                    <table class="gridtable">
                      <tr>
                        <th>序号</th>
                        <th>标的名称</th>
                        <th>规格型号</th>
                        <th>单位</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>总价（元）</th>
                      </tr>
                      <tr v-for="(item, index) in contractForm.detail" :key="index">
                        <td>{{index+1}}</td>
                        <td>{{contractForm.detail[index].name}}</td>
                        <td>{{contractForm.detail[index].stype}}</td>
                        <td>{{contractForm.detail[index].unit}}</td>
                        <td>{{contractForm.detail[index].count}}</td>
                        <td style="text-align: right;">{{contractForm.detail[index].price}}</td>
                        <td style="text-align: right;">{{contractForm.detail[index].summer}}</td>
                      </tr>
                      <tr>
                        <td colspan="4">大写（人民币）：{{contractForm.contract_cost_big}}</td>
                        <td colspan="3">小写（人民币）￥：{{contractForm.cost}}</td>
                      </tr>
                    </table>
                  </Row>
                  <div><b>税率：{{contractForm.tax_race}}%</b></div>
                  <Row>
                    <table class="gridtable">
                      <tr>
                        <td style="width: 50%">供方：{{contractForm.partB.company}}</td>
                        <td style="width: 50%">需方：{{contractForm.partA.company}}</td>
                      </tr>
                      <tr>
                        <td style="width: 50%">地址：{{contractForm.partB.address}}</td>
                        <td style="width: 50%">地址：{{contractForm.partA.address}}</td>
                      </tr>
                      <tr>
                        <td style="width: 50%">法定代表人：{{contractForm.partB.legal}}</td>
                        <td style="width: 50%">法定代表人：{{contractForm.partA.legal}}</td>
                      </tr>
                      <tr>
                        <td style="width: 50%">经办人：</td>
                        <td style="width: 50%">经办人：</td>
                      </tr>
                      <tr>
                        <td style="width: 50%">电话：{{contractForm.partB.mobile}}</td>
                        <td style="width: 50%">电话：{{contractForm.partA.mobile}}</td>
                      </tr>
                      <tr>
                        <td style="width: 50%">开户行：{{contractForm.partB.bank_name}}</td>
                        <td style="width: 50%">开户行：{{contractForm.partA.bank_name}}</td>
                      </tr>
                      <tr>
                        <td style="width: 50%">账号：{{contractForm.partB.bank_account}}</td>
                        <td style="width: 50%">账号：{{contractForm.partA.bank_account}}</td>
                      </tr>
                      <tr>
                        <td style="width: 50%">税号：{{contractForm.partB.credit_code}}</td>
                        <td style="width: 50%">税号：{{contractForm.partA.credit_code}}</td>
                      </tr>
                    </table>
                  </Row>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Scroll>
      <div class="demo-drawer-footer">
        <Button @click="handleCancel" style="margin-right: 36px;">关闭</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import moment from 'moment';
import { moneyToBig } from '@/libs/function';
export default {
  name: 'view-supplier-constract',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
  },
  data() {
    return {
      visible: this.value,
      title: '',
      height: 540,
      submitLoading: false,
      contractForm: {},
      bigNumber: [
        '零','壹','贰','叁','肆','伍','陆','柒','捌','玖','拾'
      ],
    }
  },
  methods: {
    init() {
      this.title = '查看工程合同';
      this.contractForm = this.data;
      this.contractForm.contract_date_cn = moment(this.contractForm.contract_date).format('YYYY年MM月DD日');
      this.contractForm.contract_cost_big = moneyToBig(this.contractForm.cost);
    },
    handleCancel() {
      this.visible = false;
    },
    setCurrentValue(value) {
      this.visible = value;
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.init();
      this.$emit("input", value);
    }
  },
  mounted() {
    this.height = Number(document.documentElement.clientHeight - 100);
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.cover-content{
  text-indent: 160px;
  margin-bottom: 15px;
}
.text-content{
  margin: 46px 46px;
}
.text-content p{
  text-indent: 36px;
  font-size: 18px;
}
.paperStyle {
  border: solid 1px #bdbdbd;
  margin: 24px auto;
}
.height100{
  height: 100px;
}
.height50{
  height: 50px;
  line-height: 22px;
}
.gridtable {
  font-family: '微软雅黑';
  font-size: 12px;
  color: #000000;
  border-width: 1px;
  border-color: #777777;
  border-collapse: collapse;
  width: 100%;
}

.gridtable th {
  border-width: 1px;
  padding: 1px;
  border-style: solid;
  border-color: #aaaaaa;
  background-color: #dedede;
}

.gridtable td {
  border-width: 1px;
  padding: 1px 8px;
  border-style: solid;
  border-color: #8b8b8b;
  background-color: #ffffff;
}
</style>
